<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>智研测略—AI预测与备考规划系统</title>
  <!-- CSS文件已通过JavaScript导入 -->

</head>

<body>
  <div class="result-container">
    <h1>往届生源轨迹匹配</h1>
    <!-- 个人信息显示区域（保留，无修改） -->
    <div class="user-info-section" style="margin-bottom: 2rem;">
      <h2 class="menu-title" style="text-align: left; margin-bottom: 1rem;">个人信息</h2>
      <div style="display: flex; justify-content: space-between;">
        <div style="width: 30%; text-align: center; padding: 1rem; background-color: #f5f5f5; border-radius: 4px;">
          <p style="font-weight: bold; margin-bottom: 0.5rem;">专业</p>
          <p id="majorDisplay" style="font-size: 1.1rem; color: #1976d2;">未设置</p>
        </div>
        <div style="width: 30%; text-align: center; padding: 1rem; background-color: #f5f5f5; border-radius: 4px;">
          <p style="font-weight: bold; margin-bottom: 0.5rem;">学院</p>
          <p id="collegeDisplay" style="font-size: 1.1rem; color: #1976d2;">未设置</p>
        </div>
        <div style="width: 30%; text-align: center; padding: 1rem; background-color: #f5f5f5; border-radius: 4px;">
          <p style="font-weight: bold; margin-bottom: 0.5rem;">目标院校</p>
          <p id="targetSchoolDisplay" style="font-size: 1.1rem; color: #1976d2;">未设置</p>
        </div>
      </div>
    </div>



    <!-- 成绩概况表格（删除静态成绩，保留空表格结构供JS填充） -->
    <div class="score-overview" style="margin-bottom: 2rem;">
      <h2 class="menu-title" style="text-align: left; margin-bottom: 1rem;">成绩概况</h2>
      <table class="score-table" style="width: 100%; border-collapse: collapse;">
        <thead>
          <tr style="background-color: #f5f5f5;">
            <th style="padding: 0.8rem; text-align: left; border: 1px solid #e0e0e0;">平均学分绩点</th>
            <th style="padding: 0.8rem; text-align: left; border: 1px solid #e0e0e0;">英语四级成绩</th>
            <th style="padding: 0.8rem; text-align: left; border: 1px solid #e0e0e0;">高等数学（上）</th>
            <th style="padding: 0.8rem; text-align: left; border: 1px solid #e0e0e0;">高等数学（下）</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <!-- 清空静态成绩，由JS的updateScoreTable函数填充 -->
            <td style="padding: 0.8rem; border: 1px solid #e0e0e0;" id="gpaValue">0</td>
            <td style="padding: 0.8rem; border: 1px solid #e0e0e0;" id="cet4Value">0</td>
            <td style="padding: 0.8rem; border: 1px solid #e0e0e0;" id="math1Value">0</td>
            <td style="padding: 0.8rem; border: 1px solid #e0e0e0;" id="math2Value">0</td>
          </tr>
          <tr>
            <th
              style="padding: 0.8rem; text-align: left; border: 1px solid #1976d2; background-color: #1976d2; color: white;">
              大学英语1
            </th>
            <th
              style="padding: 0.8rem; text-align: left; border: 1px solid #1976d2; background-color: #1976d2; color: white;">
              大学英语2
            </th>
            <th
              style="padding: 0.8rem; text-align: left; border: 1px solid #1976d2; background-color: #1976d2; color: white;">
              大学英语3
            </th>
            <th
              style="padding: 0.8rem; text-align: left; border: 1px solid #1976d2; background-color: #1976d2; color: white;">
              大学英语4
            </th>
          </tr>
          <tr>
            <!-- 清空静态成绩，由JS的updateScoreTable函数填充 -->
            <td style="padding: 0.8rem; border: 1px solid #e0e0e0;" id="english1Value">0</td>
            <td style="padding: 0.8rem; border: 1px solid #e0e0e0;" id="english2Value">0</td>
            <td style="padding: 0.8rem; border: 1px solid #e0e0e0;" id="english3Value">0</td>
            <td style="padding: 0.8rem; border: 1px solid #e0e0e0;" id="english4Value">0</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 提示区域（保留，无修改） -->
    <div style="margin-bottom: 1rem;">
      <h2 class="menu-title" style="text-align: left; margin-bottom: 1rem;">成绩相当的学生录取信息</h2>
      <div style="background-color: #fff9c4; border-left: 4px solid #ffc107; padding: 1rem; margin-bottom: 1rem;">
        <p style="color: #e65100; font-size: 0.9rem;">以下数据仅根据往年学员成绩进行预测，实际评估数据会因每年录取形式变化，请以实际为主</p>
      </div>
    </div>

    <!-- 相似学生显示容器（删除所有写死的student-card，保留空容器供JS动态渲染） -->
    <div id="scoreContent" class="recommendation-list"
      style="display: flex; flex-wrap: wrap; justify-content: space-between;">
      <!-- JS会自动将后端返回的相似学生卡片渲染到这里 -->
    </div>


    <!-- 按钮区域（保留，无修改） -->
    <div style="display: flex; justify-content: center; margin: 2rem 0;">
      <button id="saveStudentsBtn"
        style="min-width: 250px; white-space: nowrap; padding: 0.8rem 1.5rem; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; font-weight: bold;">保存历年参考学生信息</button>
    </div>
    <div class="bottom-buttons-container" style="display: flex; justify-content: space-between;">
      <button id="backToMainBtn" class="function-btn">返回主页</button>
      <button id="toPredictBtn" class="function-btn">报考竞争能力评估</button>
      <button id="toFunc2Btn" class="function-btn">目标院校深度洞察</button>
    </div>
  </div>

</body>

</html>